<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566901_07oyohn3uypw.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <link rel="stylesheet" href="css/tabbar.css" type="text/css">
    <style>
        .swipe {
            width: 100%;
        }

        .swipe img {
            width: 100%;
            height: 100px;
        }

        .travel-way ul li img {
            width: 50%;
            margin: 0 auto;
        }

        .travel-way ul li {
            width: 25%;
            float: left;
            text-align: center;
            padding: 4px 0;
        }

        .travel-list {
            padding-bottom: 100px;
        }

        .travel-list ul li {
            height: 155px;
            background: #fff;
            padding: 10px;
            border: 1px solid yellow;
        }

        .travel-list ul li p {
            font-size: 10px;
            color: #CDC8B1;
        }

        .travel-list ul li img {
            width: 100%;
            height: 65%;
        }

        .sprice span {
            color: red;
        }

        .sprice del {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
    <div id="swipe">
        <div class="search">
            <van-search v-model="value" placeholder="请输入搜索关键词" show-action shape="round" >
                <div slot="action" >搜索</div>
            </van-search>
        </div>
        <div class="swipe">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item><img src="images/s_1.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_2.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_3.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_4.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_5.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_6.jpg"></van-swipe-item>
                <van-swipe-item><img src="images/s_7.jpg"></van-swipe-item>
            </van-swipe>
        </div>
        <div class="travel-way" style="overflow: hidden;">
            <ul>
                <li><a href=""><img src="images/gentuanyou.png" alt="0">
                        <p>跟团游</p>
                    </a></li>
                <li><a href=""><img src="images/zizhuyou.png" alt="0">
                        <p>自助游</p>
                    </a></li>
                <li><a href=""><img src="images/youlun.png" alt="0">
                        <p>游轮</p>
                    </a></li>
                <li><a href=""><img src="images/jingdianmenpiao.png" alt="0"></span>
                        <p>景点门票</p>
                    </a></li>
                <li><a href=""><img src="images/zijiayou.png" alt="0">
                        <p>自驾游</p>
                    </a></li>
                <li><a href=""><img src="images/qianzheng.png" alt="0"></span>
                        <p>签证</p>
                    </a></li>
                <li><a href=""><img src="images/jiudian.png" alt="0">
                        <p>酒店</p>
                    </a></li>
                <li><a href=""><img src="images/wuxianwang.png" alt="0">
                        <p>无线网</p>
                    </a></li>
            </ul>
        </div>
        <div class="travel-who" style="overflow: hidden;">
            <van-grid :border="false" :column-num="3">
                
                <van-grid-item>
                    <a href="html/tourist.html"><van-image src="images/ad_1.png" /> </a>
                </van-grid-item>
                <van-grid-item>
                    <a href="html/tourist.html"><van-image src="images/ad_2.png" /></a>
                </van-grid-item>
                <van-grid-item>
                    <a href="html/tourist.html"> <van-image src="images/ad_3.png" /></a>
                </van-grid-item>
           
            </van-grid>
        </div>
    </div>
    <div id="list">
        <div class="travel-list" style="overflow: hidden;">
            <ul>
                <li v-for="(good,index) in goodsList"><img v-bind:src="good.thumbnail.url" alt="载入中">
                    <span>{{good.title}}</span>
                    <p>{{good.title2}}</p>
                    <div class="sprice">
                        <span>￥{{good.price}}</span>
                        <del>￥{{good.price1}}</del></div>
                </li>
                
            </ul>
        </div>
    </div>
        <div class="tabbar">
            <ul>
                <li><a href="index.html"><span class="iconfont icon-shouye"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li><a href="html/area.html">
                        <span class="iconfont icon-diqu"></span>
                        <p>地区</p>
                    </a>
                </li>
                <li><a href="html/life.html">
                        <span class="iconfont icon-shenghuo"></span>
                        <p>生活</p>
                    </a>
                </li>
                <li><a href="html/activity.html">
                        <span class="iconfont icon-huodong"></span>
                        <p>活动</p>
                    </a>
                </li>
                <li><a href="html/mine.html">
                        <span class="iconfont icon-wode"></span>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    
    <script src="script/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script src="script/axios.js"></script>
    <script src="script/SHA1.js"></script>
      <script> 
    //   var vm = new Vue({
    //         el: "#swipe",
    //         data: {}
    //     })
    
          var now = Date.now();
          var appKey = SHA1("A6022694570982" + "UZ" + "67A344E5-99A7-33F1-6B44-2616F73CD174" + "UZ" + now) + "." + now
          var vm = new Vue({
            el: ".container",
            data: {
            value:"搜索跟团游",
              goodsList: []
            },
            created: function () {
              this.getGoodList()
            },
            methods: {
              //获取商品列表
              getGoodList: function () {
                var _this = this;
                axios.get('https://d.apicloud.com/mcm/api/tourist', {
                  headers: {
                    "X-APICloud-AppId": "A6022694570982",
                    "X-APICloud-AppKey": appKey
                  }
                })
                  .then(function (response) {
                    _this.goodsList = response.data;
                    console.log(response.data);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
              }
            },
          })
        </script>
</body>

</html>